{% extends 'admin/public/base.html' %}


{% block con-header %}
<div class="container-fluid am-cf">
    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
            <div class="page-header-heading">
                <span class="am-icon-home page-header-heading-icon"></span>
                商品添加
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block con-footer %}
<div class="row-content am-cf">
	<div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
	    <div class="widget am-cf">
	        <div class="widget-head am-cf">
	            <div class="widget-title am-fl">添加商品信息</div>
	            <div class="widget-function am-fr">
	                <!-- <a href="javascript:;" class="am-icon-cog"></a> -->
	            </div>
	        </div>
	        <div class="widget-body am-fr">

	            <form class="am-form tpl-form-line-form" action="{% url 'admin_user_insert' %}" method="post" enctype="multipart/form-data">
					<!-- 所属分类 -->
					
					<!-- 商品标题 -->
					<!-- 商品价格 -->
					<!-- 商品库存 -->
					<!-- 商品图片 -->
					<!-- 商品详情 -->


	            	<!-- 用户名 -->
	                <div class="am-form-group">
	                    <label for="user-name" class="am-u-sm-3 am-form-label">用户名
	                    </label>
	                    <div class="am-u-sm-9">
	                        <input type="text" class="tpl-form-input" id="user-name" placeholder="请输入用户名" name="username">
	                    </div>
	                </div>
	                <!-- 密码 -->
	                <div class="am-form-group">
	                    <label for="user-name" class="am-u-sm-3 am-form-label">密码
	                    </label>
	                    <div class="am-u-sm-9">
	                        <input type="password" class="tpl-form-input" id="user-name" placeholder="请输入密码" name="password">
	                    </div>
	                </div>
	                <!-- 邮箱 -->
	                <div class="am-form-group">
	                    <label for="user-name" class="am-u-sm-3 am-form-label">邮箱
	                    </label>
	                    <div class="am-u-sm-9">
	                        <input type="text" class="tpl-form-input" id="user-name" placeholder="请输入邮箱" name="email">
	                    </div>
	                </div>
	                <!-- 电话 -->
	                <div class="am-form-group">
	                    <label for="user-name" class="am-u-sm-3 am-form-label">电话
	                    </label>
	                    <div class="am-u-sm-9">
	                        <input type="text" class="tpl-form-input" id="user-name" placeholder="请输入电话" name="phone">
	                    </div>
	                </div>
	                <!-- 年龄 -->
	                <div class="am-form-group">
	                    <label for="user-name" class="am-u-sm-3 am-form-label">年龄
	                    </label>
	                    <div class="am-u-sm-9">
	                        <input type="text" class="tpl-form-input" id="user-name" placeholder="请输入年龄" name="age">
	                    </div>
	                </div>
					<!-- 性别 -->
					<div class="am-form-group">
						<label for="user-name" class="am-u-sm-3 am-form-label">
						    性别
						</label>
						<div class="am-u-sm-9">
						    <div class="am-form-group">
						        <label class="am-radio-inline"><input type="radio" name="sex" value="男"> 男</label>
						        <label class="am-radio-inline"><input type="radio" name="sex" value="女"> 女</label>
						    </div>
						</div>
					</div>
					<!-- 图片 -->
	                <div class="am-form-group">
	                    <label for="user-weibo" class="am-u-sm-3 am-form-label">头像
	                    </label>
	                    <div class="am-u-sm-9">
	                        <div class="am-form-group am-form-file">
	                            <div class="tpl-form-file-img">
	                                <img src="/static/pics/default/default.ico" alt="" id="filepicurl">
	                            </div>
	                            <button type="button" class="am-btn am-btn-danger am-btn-sm">
									<i class="am-icon-cloud-upload"></i> 添加头像图片
								</button>
	                            <input id="doc-form-file" type="file" multiple="" name="picurl">
	                        </div>
	                    </div>
	                </div>
					<script type="text/javascript">
						$('#doc-form-file').change(function(){
							// 新建一个表单对象
							var form = new FormData
							// 获取当期选择的文件
							file = this.files[0]
							// 把当前的文件添加到表单对象中
							form.append('pic',file)
							form.append('csrfmiddlewaretoken','{{ csrf_token }}')
							$.ajax({
								// 请求地址
								url : '{% url "admin_ajax_upload" %}',
								type:'POST',
								data:form,
								processData:false,//设置ajax不处理发送的数据
								contentType:false,//不去设置Context-Type请求头
								async:true,//异步请求
								success:function(data){
									// 判断文件是否上传成功
									if(data['code']==0){
										// 把上传的图片动态加载到页面中
										$('#filepicurl').attr('src',data['url'])
										// 把上传的图片的路径，添加到表单中
										$('input[name=picurl]').val(data['url'])
									}else{
										alert(data['msg'])
									}
								}
							},'json');
						});
					</script>
					{% csrf_token %}
	                <div class="am-form-group">
	                    <div class="am-u-sm-9 am-u-sm-push-3">
	                        <button  class="am-btn am-btn-primary tpl-btn-bg-color-success ">提交</button>
	                    </div>
	                </div>

	            </form>
	        </div>
	    </div>
	</div>





</div>
{% endblock %}